<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.*,java.net.*" %>
<%@ page import="org.nanotek.base.*" %>
<%
response.setHeader("Cache-Control","no-cache");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>OfficeUrl</title>
<script type="text/javascript" src="/javascript/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/javascript/js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="/javascript/script_utils.js"></script>
<script type="text/javascript" src="/javascript/interval.js"></script>
<script type="text/javascript" src="/javascript/uuid.js"></script>
<script type="text/javascript"> 
$(function() {
	console.log("JQUERY READY ready!");
 	 hash = $(location).attr('hash');
 	 if (hash){
 		 console.log(hash);
 	 }
});

var fieldList; 

$( document ).ready(function() {
	$(".result")
	.click(function() 
	 	{
			console.log("origin");
			console.log(this.id);
			id = this.id; 
			ajaps.callbacksuccess=	function (data){
				  	console.log (" " + data);
				  	fieldList = data.baseFields; 
				  	//alert (data.office.id + " " + data.office.name + " " + data.office.url);
				  	office = data.office;
				  	scannedOffice = data.scannedOffice;
				  	$("#officeid").val(scannedOffice.id);
				  	$("#officename").val(scannedOffice.normalizedName);
				  	$("#officeurl").val(scannedOffice.officeUrl);
				  	processDetailList(scannedOffice);
				  	//$("#officeContactInfo").val(office.contactInfo);
				};
			ret = ajaps.send(ajaps.buildRequest("offices/getOffice/"+id,""),null,ajaps.set);
			console.log("endorigin");
			return true;
		});
	
	$( "#officeform" ).on( "submit", function( event ) {
		  event.preventDefault();
		  console.log( $( this ).serializeArray() );
		  office = new Object();
		  //var data =  JSON.stringify($( this ).serializeArray());
		  office.id = $("#officeid").val(); 
		  office.name = $("#officename").val(); 
		  office.url = $("#officeurl").val();
		  details = $(".contactDetail"); 
		  office.details = new Array();
		  for (index in details) 
			{ 
				  value = details[index].value;
				  valueName = details[index].name; 
				  controlValue = $("#"+valueName).val();
				  if (index != "length"){ 
					  var detail = {name:"",value:"" };
					  detail.value = value;
					  detail.name = controlValue;
	    			  office.details[index] = detail;
				  }
			}
		  //office.contactInfo = $("#officeContactInfo").val(); 
		  
		  var data =  JSON.stringify(office);
		  
		  ajaps.contentType='application/json';
		  ajaps.callbacksuccess =  formSucessHandler;
	      ajaps.callbackerror = 
	    	  function (xhr,sts,error) { 
	    	  		console.log("error request " + xhr);
	    	  		console.log ("error " + error);
	    	  		console.log (" sts " + sts);
	      		};
		  ret = ajaps.send(ajaps.buildRequest("offices/updateNormalizedOffice/"+$("#officeid")[0].value,data,"POST"),"",ajaps.set);
		  console.log("sending update " + ret);
		  //$( "#showvalues" ).text("Serialized form " + JSON.stringify($( this ).serializeArray()));
		 $( "#showvalues" ).text("Serialized form " +  JSON.stringify(office));
		});
	
	$( "#createInputSectionButton" ).on("click" , function(event) 
			{ 
				
				var controlUUID = uuid.v1();
				$("#detailarray").append("<div>"+
						"<div style='float:left'>"+
							"<input class='contactDetail' type='text' size=35 class='sectionCreateInput' name='" +controlUUID + "'></input>" +
						 "</div>"+
						 	"<div style='float:right'>" +  createBaseFieldsOption(controlUUID) + "</div>"+
						 "</div></br/>");
			}); 
	
});

function formSucessHandler(data){
  	console.log (" " + data);
  	//alert (data.office.id + " " + data.office.name + " " + data.office.url);
  	office = data.office;
  	$("#officeid").val(office.id);
  	$("#officename").val(office.name);
  	$("#officeurl").val(office.url);
  	$("#officeContactInfo").val(office.contactInfo);
};

function processDetailList(scannedOffice) 
{
	console.log (JSON.stringify(scannedOffice));
	//this is an array. 
	var officeData = scannedOffice.officeData;
	$("#detailarray").empty();
	fieldNames = createBaseFieldsOption(); 
	for (detail in officeData) 
		{ 
			var controlUUID = uuid.v1();
			$("#detailarray").append (
				"<input type=text class='contactDetail' value='" + officeData[detail] + "' name='"+controlUUID+"' ></input> <span>" +  createBaseFieldsOption(controlUUID)  + "</span></p>" 		
			); 
			
		}
	createFrameSection(scannedOffice.officeUrl); 
}

function createBaseFieldsOption(id) 
{
	    var opt = "";
		for (index in fieldList) 
			{ 
				value = fieldList[index]; 
				opt = opt + "<option id="+value +">"+value+"</option>";
			}
		opt = "<select class='contactBaseFields' id = " + id +">" + opt + "</select>";
		return opt;
}

function createFrameSection(url){ 
	frameDiv = $("#framediv"); 
	frameDiv.empty();
	frameDiv.append("<iframe id=mainframe name=mainframe src=" + url + " width=800 height=" +$("#detFrame").height() + "scrolling='yes' sandbox='allow-same-origin allow-forms allow-scripts' ></iframe>");
} 

var videoSection = {
		type: "div", //a string that represent the container element that holds the video element.
		id:"playerBase", //the id of the element.
		aliasId:"td",
		clazz:"videoSection",//the class of the element.
		style:"",//the stly of the html element.
		height:300,
		width:800,
		src:""
  };

function hideResult(value) 
{ 
	$("#"+value).parent().remove();
}

//$( document ).ready(function() {

</script>
</head>
<body>
<table  border=1 style="width:1200px">
<tr>
<td id="detFrame">
	<div id="framediv" style="position:relative,left:2px;top:2px;width:800px;height:600px">
	</div>
</td>
<td>
	<form name="contactform" action="saveContact" id="officeform">
		<span><label for="office.id">id:</label><input type="text" name="id" id="officeid" size="8" value=""/></span>	
		<br/>
		<span><label for="office.name">name:</label> <input type="text" name="name" id="officename" size="60" value=""/></span>	
		<br/>
		<span><label for="office.url">url:</label> <input type="text" name="url" id="officeurl" size="60" value=""/></span>	
		<br/>
		<div id="detailarray">
		</div>
		<br/>
		<table>
		<tr>
		<td>
		<div id=formCommandOptions class=formCommands style="position:relative;left=2px;top=2px">
			<input type=button name=btnnew value="save+new" /><input type=submit name=btnsave value="save" /><input type=button name=create id="createInputSectionButton" value="Create Input Section" />
		</div>
		</td>
		</tr>
		</table>
	</form>
</td>
</tr>
<tr>
<td>
</td>
<td>
	<div id="showvalues"></div>
</td>
</tr>
<tr>
<td style="vertical-align:text-top">
<iframe src="/search_box.html" style="position:relative;left:0px;top:0px" width="100%" height="1400px"  sandbox='allow-scripts allow-same-origin'  ></iframe>
</td>
<td>
<%="Office List"%>
<br/>
<ul>
<%
List<ScannedOffice> offices = (List<ScannedOffice>)request.getAttribute("officesList");
for (ScannedOffice officeScanned : offices) {
	try { 
%>
<li>
   <div class="result" id="<%=officeScanned.getId()%>">   
	   <b class="name"><%=officeScanned.getNormalizedName()%></b>
	   <p>
	   <a href="<%=officeScanned.getOfficeUrl()%>" class="urlOffice" onclick="return false;">
	   <%=officeScanned.getOfficeUrl()%></a>
	   </p>
   </div>
   <input type="button" value="hide" onclick='hideResult(<%=officeScanned.getId()%>)'/>
</li>	
<%
	}catch (Exception ex) 
  { 
	  ex.printStackTrace(); 
  }
	}%>
</ul>
<br/> 
<%=request.getAttribute("message") %>
</td>
</tr>
</table>
</body>
</html>